<template>
  <div id="recommend">
    <recommend-banner/>
    <recommend-music/>
  </div>
</template>

<script>
import RecommendBanner from './childrenCpns/RecommendBanner.vue'
import RecommendMusic from './childrenCpns/RecommendMusic.vue'
import { debounce } from 'utils'

export default {
  name: 'Recommend',
  data () {
    return {
      imgLoadDebounce: null
    }
  },
  components: {
    RecommendBanner,
    RecommendMusic
  },
  created () {
    this.scrollUpdate()
    this.scrollUpdate()
    this._getDebounce()
    this.bindBusImgLoad()
  },
  methods: {
    // 1. 绑定图片加载事件
    bindBusImgLoad () {
      this.$bus.$on('imgLoad', () => {
        // console.log('imgload')
        this.imgLoadDebounce()
      })
    },
    // 2. 刷新
    scrollUpdate () {
      this.$emit('scrollUpdate')
    },
    // 3. 获取防抖函数
    _getDebounce () {
      this.imgLoadDebounce = debounce(() => {
        this.scrollUpdate()
      })
    }
  }
}
</script>

<style scoped lang="less">
// #recommend {
//   width: 100%;
//   height: 100%;
//   padding: 20px 40px 0 40px;
// }
</style>
